<template>
<div class="goodslist-wrap">
    <header>
        <div>
           <van-icon name="arrow-left"
            size="25"
            @click="hardClickback" />
            <span>商品列表</span>
            <van-icon name="more-o" size="25" />
        </div>
        <div>
         <van-search v-model="value" placeholder="请输入搜索关键词"
         @click="hardleSearch" />

        </div>
        
      </header>
        <div class="tabs">
         <ul>
            <li>默认<van-icon name="arrow-down"
            size="10" /></li>
            <li>销量</li>
            <li>价格</li>
            <li>筛选</li>
        </ul>
      </div>
      <div class="listcart">
          <van-card 
          v-for="item in sealist" :key="item.id"
                :price="item.sale_price"
                :title="item.presubject"
                :thumb="item.photo">
        <template #bottom>
          <span style="margin-left:.1rem">{{item.dprice}}</span>
          <div> {{item.comments}}{{item.sold}}</div>
         
        </template>
           </van-card>
      </div>
</div>
</template>

<script>
import Vue from 'vue';
import { Icon } from 'vant';
Vue.use(Icon);
import { Search } from 'vant';

Vue.use(Search);
import { Tab, Tabs } from 'vant';

Vue.use(Tab);
Vue.use(Tabs);
import { Card } from 'vant';

Vue.use(Card);
export default {
    data(){
        return{
            value:'',
            active:1,
            sealist:[],
        }
    },
    methods:{
        hardleSearch(){
            this.$router.push('/search')
        },
        hardClickback(){
        this.$router.back()
    }
    },
   async mounted(){
         let result =await this.$http.get({url:'/goods/list/main.html',
          params:{
            version:358,
            brandid:0,
            page:1,
            orderby:'def_desc',
            cateid:0,
            pet_type:'dog',
            extend_pam:'keyword:狗粮',
            real_wid:'',
            region:'',
            atid:'',
            system:'wap',
            isWeb:1,
            distinct_id:'116825858970721&_=1628862569738',
            }
          })
          this.sealist=result.data.list
          console.log(this.sealist)
         
    }
    
    

}
</script>

<style lang="stylus" scoped>
.goodslist-wrap
  height 100%
  header
    background-color #fff
    >div:first-child 
      height .5rem
      display flex
      justify-content space-between
      align-items center
      padding 0 .1rem 0 .1rem
      >span
        font-size .18rem
        text-align center
        line-height .5rem
    >div:last-child
      height .60rem
    
   .tabs
    background-color #fff
    >ul
        height .4rem
        display flex
        >li
            flex 1
            text-align center
            line-height .4rem
   .listcart
        height 100%
        overflow auto


      
</style>